<template>
  <view class="page">
    <fu-custom bgColor="bg-white" :isBackText="true" :isBottom="true">
      <block slot="backText"></block>
      <block slot="content">{{i18n['购物车']}}</block>
      <!-- #ifdef APP-PLUS || H5 -->
      <block slot="right">
        <view class="text-theme fu-fs32" @tap="changeEditType" v-if="isLogin && cartList.length != 0">{{ isEditor ? i18n['完成'] : i18n['管理'] }}</view>
      </block>
      <!-- #endif -->
    </fu-custom>
     <!--  数据加载loadding  -->
    <template v-if="!isLogin">
      <view class="padding-top flex flex-direction align-center justify-center text-999 bg-white padding-bottom-64">
        <image class="width-440 height-220" :src="imgBaseUrl + 'tab/cart.png'" mode="widthFix"></image>
        <view class="margin-top-xs fu-fs24">{{i18n['您的购物车还没有商品，快去挑选吧']}}</view>
        <view class="width-280 height-64 line-height-64 round bg-theme text-white text-center fu-fs28 margin-top" @click="navToLogin">{{i18n['去登录']}}</view>
      </view>
    </template>
    <template v-if="isLogin && cartList.length == 0">
      <view class="padding-top flex flex-direction align-center justify-center text-999 bg-white padding-bottom-64">
        <image class="width-440 height-220" :src="imgBaseUrl + 'tab/cart.png'" mode="widthFix"></image>
        <view class="margin-top-xs fu-fs24">{{i18n['您的购物车还没有商品，快去挑选吧']}}</view>
        <view class="width-280 height-64 line-height-64 round bg-theme text-white text-center fu-fs28 margin-top" @click="navToHome">{{i18n['去挑选好货']}}</view>
      </view>
    </template>
    <template v-if="isLogin && cartList.length != 0">
      <!-- #ifdef MP-WEIXIN -->
      <view class="tool-box bg-f8 flex justify-end padding-sm" :style="{ top: CustomBar + 'px' }">
        <view class="width-144 height-56 line-height-56 round text-theme bg-white text-center fu-fs32 solid" @tap="changeEditType" v-if="isLogin && cartList.length != 0">{{ isEditor ? i18n['完成'] : i18n['管理'] }}</view>
      </view>
      <!-- #endif -->
      <view class="padding-tb-xs bg-white">
        <block v-for="(item, index) in cartList" :key="index">
          <view v-if="item.is_wholesale == 1" class="radius-16 padding-lr bg-white flex align-center ">
            <view @tap="check(item, index)">
              <template v-if="isEditor">
                <image class="fu-block-40" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="item.delChecked"></image>
                <image class="fu-block-40" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-if="!item.delChecked"></image>
              </template>
              <template v-if="!isEditor">
                <image class="fu-block-40" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="item.checked"></image>
                <image class="fu-block-40" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-if="!item.checked"></image>
              </template>
            </view>
            <view class="padding-tb-sm flex align-stretch flex-sub" style="min-width: 1px;">
              <view class="relative fu-block-180 radius-16 margin-lr-sm bg-grey">
                <view class="box-kong fu-block-148 flex align-center justify-center round text-df text-white" v-if="item.stock == 0">
                  <image class="fu-block-96" :src="imgBaseUrl + 'tab/sellOut.png'" mode=""></image>
                </view>
                <view class="box-kong fu-block-148 flex align-center justify-center round text-df text-white" v-if="item.is_valid == 1">
                  <image class="fu-block-96" :src="imgBaseUrl + 'tab/shelf.png'" mode=""></image>
                </view>
                <fu-image :src="item.goods_thumb" mode="aspectFill" ></fu-image>
              </view>
              <view class="flex flex-direction justify-between flex-sub" style="min-width: 1px;">
                <view>
                  <view class="text-df text-cut" @tap="toDetail(item, index)">{{ item.goods_name }}</view>
                  <view class="text-sm text-999 bg-f8 flex align-center justify-between height-48 line-height-48 padding-lr-sm margin-tb-xs radius-8" v-if="item.sku_name">
                    <view class="width-250 text-cut">
                      <text>{{ item.sku_name }}</text>
                    </view>
                  </view>
                </view>
                <view class="flex justify-between align-center">
                  <view class="text-prices" @tap="toDetail(item, index)">
                    <text class="text-price text-df"></text>
                    <text class="text-xl">{{ item.curPrice }}</text>
                  </view>
                  <view><uni-number-box :min="1" :max="item.stock" :value="item.num" @change="numberChange($event, index)"></uni-number-box></view>
                </view>
              </view>
            </view>
          </view>
          <view v-else class="radius-16 padding-lr bg-white flex align-center">
            <view @tap="check(item, index)">
              <template v-if="isEditor">
                <image class="fu-block-40" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="item.delChecked"></image>
                <image class="fu-block-40" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-if="!item.delChecked"></image>
              </template>
              <template v-if="!isEditor">
                <image class="fu-block-40" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="item.checked"></image>
                <image class="fu-block-40" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-if="!item.checked"></image>
              </template>
            </view>
            <view class="padding-tb-sm flex align-stretch flex-sub" style="min-width: 1px;">
              <view class="relative fu-block-180 radius-16 margin-lr-sm">
                <view class="box-kong fu-block-148 flex align-center justify-center round text-df text-white" v-if="item.stock == 0">
                  <image class="fu-block-96" :src="imgBaseUrl + 'tab/sellOut.png'" mode=""></image>
                </view>
                <view class="box-kong fu-block-148 flex align-center justify-center round text-df text-white" v-if="item.is_valid == 1">
                  <image class="fu-block-96" :src="imgBaseUrl + 'tab/shelf.png'" mode=""></image>
                </view>
                <fu-image :src="item.goods_thumb" mode="aspectFill"></fu-image>
              </view>
              <view class="flex flex-direction justify-between flex-sub" style="min-width: 1px;">
                <view>
                  <view class="text-df text-cut" @tap="toDetail(item, index)">{{ item.goods_name }}</view>
                  <view class="text-sm text-999 bg-f8 flex align-center justify-between height-48 line-height-48 padding-lr-sm margin-tb-xs radius-8" v-if="item.sku_name" @tap="openPopup(item)">
                    <view class="flex-sub text-cut" style="min-width: 1px;">
                      <text>{{ item.sku_name }}</text>
                    </view>
                    <view>
                      <text class="margin-right-sm">
                        {{i18n['选规格']}}
                      </text>
                      <text class="cuIcon-unfold text-666"></text>
                    </view>
                  </view>
				  <view class="margin-tb-xs text-theme text-sm">支持: {{item.send_type == 1 ? '物流' : item.send_type == 2 ? '自提' : '物流，自提'}}</view>
                </view>
                <view class="flex justify-between align-center">
                  <view class="text-lg text-prices" @tap="toDetail(item, index)">
                    <text class="text-price"></text>
                    <text>{{ item | filterGoodsPrice }}</text>
                  </view>
                  <view><uni-number-box :min="1" :max="item.stock" :value="item.num" @change="numberChange($event, index)"></uni-number-box></view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="action-bar bg-white flex justify-between align-center">
        <view class="flex flex-sub align-center padding-lr justify-between height-90" style="min-width: 1px;">
          <view class="flex justify-between align-center" @tap="checkAll">
            <template v-if="isEditor">
              <image class="fu-block-40" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="delAllChecked"></image>
              <image class="fu-block-40" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-if="!delAllChecked"></image>
            </template>
            <template v-if="!isEditor">
              <image class="fu-block-40" :src="imgBaseUrl + 'global/checked.png'" mode="" v-if="allChecked"></image>
              <image class="fu-block-40" :src="imgBaseUrl + 'global/unchecked.png'" mode="" v-if="!allChecked"></image>
            </template>
            <text class="margin-left-sm text-df text-333">{{i18n['全选']}}</text>
          </view>
          <view class="margin-left-sm text-df text-666" v-if="!isEditor">
            <view>
             {{ i18n['合计']}}:
              <text class="text-price text-theme text-lg">{{ totalPrice }}</text>
            </view>
          </view>
        </view>
        <view v-if="!isEditor" class="bg-theme text-white width-230 height-90 line-height-90 text-center fu-fs32" @click="createOrder">
          {{i18n['去结算']}}({{ totalNumber }})
        </view>
        <view
          class="width-200 height-72 line-height-72 text-center fu-fs28 margin-right-sm round text-theme text-bold"
          :style="{'background': themeBgOpacityColor}"
          v-if="isEditor"
          @click="handleTransfer">
          {{i18n['移入收藏']}}
        </view>
        <view
          class="width-200 height-72 line-height-72 text-center fu-fs28 margin-right-sm round bg-f6 text-333 text-bold"
          v-if="isEditor"
          @click="del">
          {{i18n['删除']}}
        </view>
      </view>
    </template>
    <!-- 为你推荐 -->
    <view class="margin-top-sm">
      <fu-waterflow ref="guess" :isCart="isCart"></fu-waterflow>
    </view>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
    <!-- 规格弹窗 -->
    <fu-specs-popup
      ref="specs"
      :speclist="spec_list"
      :skulist="sku_list"
      :currentId="sku_id"
      :info="goodsInfo"
      :isCart="isCart"
      @confirmChange="confirmChange"
      @changeSpec="setSpec"
    ></fu-specs-popup>
  </view>
</template>

<script>
import richText from '@/common/utils/richText.js';
import fuSpecsPopup from '../../components/fu-specs-popup/index.vue';
export default {
  components: {
    fuSpecsPopup,
  },
  data() {
    return {
      //选择规格
      select_id: '',
      goodsInfo: {}, // 商品信息
      spec_list: [], // 规格列表
      sku_list: [], // 规格参照列表
      sku_id: 0, // 当前规格id
      isCart: true,
      getChangeValue: {},
      tableList: [], //商品推荐
      isShowLoading: true,
      CustomBar: this.CustomBar,
      StatusBar: this.StatusBar,
      isEditor: false, // 管理 or 完成
      options: [
        {
          text: global.i18n['删除'],
          style: {
            backgroundColor: this.themeColor
          }
        }
      ],
      cartList: [], // 购物车列表
      checkedCache: [], // 上一次缓存的选中状态
      loading: false
    };
  },
  computed: {
    isLogin(){
      return this.$store.getters.isLogin;
    },
    // 是否会员
    isMember() {
      return this.$store.getters.isMember;
    },
    // 选择的商品总价
    totalPrice() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        if (item.checked == true) {
          let _price;
          if (item.is_wholesale == 1) {
            _price = item.curPrice;
          } else {
            _price = this.isMember ? item.member_price : item.shop_price;
          }
          total += Number(_price) * Number(item.num);
        }
      });
      return Number(total.toFixed(2));
    },
    // 选择的商品数量
    totalNumber() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        if (item.checked == true) {
          total += Number(item.num);
        }
      });
      return total;
    },
    // 购物车内的商品数量
    allNumber() {
      let list = this.cartList;
      let total = 0;
      list.forEach(item => {
        total += Number(item.num);
      });
      return total;
    },
    // 管理模式全选状态
    delAllChecked() {
      let list = this.cartList;
      let bool = true;
      list.forEach(item => {
        // if(item.stock == 0) return ;
        if (item.delChecked == false) {
          bool = false;
        }
      });
      return bool;
    },
    // 正常模式全选状态
    allChecked() {
      let list = this.cartList;
      let bool = true;
      list.forEach(item => {
        if(item.stock == 0) return ;
        if(item.is_valid == 1) return ;
        if (item.checked == false) {
          bool = false;
        }
      });
      return bool;
    }
  },
  onPullDownRefresh() {
    if (global.token) {
      this.getCartData(true);
    } else {
      uni.stopPullDownRefresh();
    }
    this.$refs.guess && this.$refs.guess.refresh();
  },
  onReachBottom(e) {
    this.$refs.guess && this.$refs.guess.loadData();
  },
  onShow() {
    if (global.token) {
      this.getCartData();
      // this.isLogin = true;
    } else {
      // this.isLogin = false;
    }
    this.isEditor = false;
    this.$store.dispatch('getCartList');
    this.setTabBarItem();
  },
  onLoad() {
    this.$nextTick(() => {
      this.$refs.guess && this.$refs.guess.refresh();
    });
    uni.$on('updateCart', () => {
      this.getCartData();
    });
    uni.$on('delCartGoods', data => {
      // 删除已买商品
      this.delCartGoods(data);
    });
  },
  onUnload() {
    uni.$off('updateCart');
    uni.$off('delCartGoods');
  },
  methods: {
    // 获取购物车数据
    getCartData(value) {
      if (!value) {
        this.isShowLoading = true;
      }
      this.$api
        .post(global.apiUrls.getCartList)
        .then(res => {
          // this.loading = false;
          this.isShowLoading = false;
          if (res.data.code == 1) {
            let data = res.data.data.map(item => {
              // 批发商品展示价格计算
              if (item.is_wholesale == 1) {
                item.curPrice = this.computedCurPrice(item.shop_price, item.batch_data, item.num);
              }
              return item;
            });
            this.initCheckedType(data);
          }
          uni.stopPullDownRefresh();
        })
        .catch(err => {
          // this.loading = false;
          uni.stopPullDownRefresh();
          this.isShowLoading = false;
        });
    },
    // 初始化购物车商品选中状态
    initCheckedType(list) {
      list.forEach(item => {
        item.show = false;
        // 判断是否是选中状态
        if (this.checkedCache.includes(item.id)) {
          item.checked = false;
        } else {
          item.checked = false;
        }
        item.delChecked = false;
      });
      this.cartList = list;
      this.$forceUpdate();
    },
    // 判断是否是选中状态
    isChecked(id) {
      return this.checkedCache.includes(id);
    },
    // 缓存购物车选中状态 记录ids
    cacheCartChecked() {
      let ids = this.cartList.filter(item => {
        return item.checked === true;
      });
      let arr = [];
      ids.forEach(item => {
        arr.push(item.id);
      });
      uni.setStorageSync('cart_checked_cache', arr);
    },
    // 获取购物车选中状态
    getCartChecked() {
      let cache = uni.getStorageSync('cart_checked_cache');
      this.checkedCache = cache || [];
    },
    // 点击导航管理按钮
    changeEditType() {
      if (!this.isLogin) {
        return;
      }
      let _text = '';
      this.isEditor = !this.isEditor;
      if (!this.isEditor) {
        _text = this.i18n['管理'];
      } else {
        _text =this.i18n['完成'];
        this.cartList.forEach(item => {
          item.delChecked = true;
        });
      }
    },
    // 删除购物车
    delFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认删除吗']+'?',
        success: res => {
          if (res.confirm) {
            this.delCartGoods(ids);
          }
        }
      });
    },
    // 删除购物车
    delCartGoods(ids) {
      this.$api
        .post(global.apiUrls.delCart, {
          cart_ids: ids
        })
        .then(res => {
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    // 商品选中状态处理
    check(item, i) {
      if (this.isEditor) {
        item.delChecked = !item.delChecked;
      } else {
        if (item.stock == 0) return this.$message.info(this.i18n['该商品已售完,正在采购中']);
        if (item.is_valid == 1) return this.$message.info(this.i18n['该商品已下架']);
        this.cartList[i].checked = !this.cartList[i].checked;
        this.cacheCartChecked();
      }
    },
    checkfor() {
      //选中状态，页面关闭的时候全部为false
      let _type = false;
      this.cartList.forEach(item => {
        item.checked == false;
        item.delChecked == false;
      });
      this.allChecked = false;
      this.delAllChecked = false;
    },
    //全选|取消全选
    checkAll() {
      if (this.isEditor) {
        const bool = !this.delAllChecked;
        this.cartList.forEach(item => {
          item.delChecked = bool;
        });
      } else {
        const bool = !this.allChecked;
        this.cartList.forEach(item => {
          if (item.is_valid == 0 && item.stock != 0) {
            item.checked = bool;
          }
        });
      }
    },
    //数量改变
    numberChange(e, index) {
      let item = JSON.parse(JSON.stringify(this.cartList[index]));
      if (item.is_wholesale == 1) {
        let _price = this.computedCurPrice(item.shop_price, item.batch_data, e);
        this.cartList[index].curPrice = _price;
      }
      this.$api
        .post(global.apiUrls.postSetCartNumber, {
          cart_id: item.id,
          sku_id: item.sku_id,
          num: e
        })
        .then(res => {
          if (res.data.code == 1) {
            this.$set(this.cartList[index], 'num', e);
            this.$store.dispatch('getCartList');
          }
        });
    },
    // 计算批发商品当前数量所使用的的价格
    computedCurPrice(shop_price, batch_data, num) {
      let arr = JSON.parse(JSON.stringify(batch_data)).reverse();
      let whole = arr.find(ele => Number(ele.start_batch) <= Number(num));
      let price = 0;
      if (whole) {
        return Number(whole.trade_price).toFixed(2);
      } else {
        return Number(shop_price).toFixed(2);
      }
    },
    // 删除商品
    del() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        if (item.delChecked) {
          ids.push(item.id);
        }
      });
      if (ids.length == 0) return this.$message.info(this.i18n['未选择商品']);
      this.delFromCart(ids.join(','));
    },
    //移入收藏卡
    handleTransfer() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        if (item.delChecked) {
          ids.push(item.id);
        }
      });
      if (ids.length == 0) return this.$message.info(this.i18n['请选择要移动商品']);
      this.transFromCart(ids.join(','));
    },
    // 移入收藏卡
    transFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认移入收藏夹吗']+'?',
        success: res => {
          if (res.confirm) {
            this.transCartGoods(ids);
          }
        }
      });
    },
    //确定要移入
    transCartGoods(ids) {
      this.$api
        .post(global.apiUrls.removeGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    //
    // 创建订单
    createOrder() {
      const list = this.cartList;
      let ids = [];
      list.forEach(item => {
        if (item.checked) {
          ids.push(item.id);
        }
      });
      const cart_ids = ids.join(',');
      if (cart_ids == '') return this.$message.info(this.i18n['请选择商品']);
      this.$api
        .post(global.apiUrls.check_goods_num, {
          cart_ids: ids
        })
        .then(res => {
          if (res.data.code == 1) {
            this.$urouter.navigateTo({
              url: '/pages/order/order-process/confirm-order/index',
              params: {
                type: 'cart',
                cart_ids: cart_ids
              }
            });
          } else {
            this.$message.info(res.data.msg);
          }
        });
    },
    // 去商品详情
    toDetail(item) {
      if (item.is_valid == 1) return this.$message.info(this.i18n['该商品已下架']);
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-detail/index',
        params: {
          goods_id: item.goods_id,
          sku_id: item.sku_id
        }
      });
    },
    // 去登陆
    navToLogin() {
      this.$util.navigateToLogin();
      // this.$util.debounce(this.$util.navigateToLogin,200);
    },
    // 去首页
    navToHome() {
      this.$urouter.switchTab('/pages/tab/home/shopindex/index');
    },
    //清理下架产品
    handleClearn() {
      this.$api
        .post(global.apiUrls.cleanUpGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },
    //选择清理下架产品
    handleClean() {
      const list = this.cartList;
      let ids = [];
      let is_shelves = [];
      list.forEach(item => {
        if (item.delChecked) {
          ids.push(item.id);
        }
        if (item.delChecked && item.is_valid == 0) {
          is_shelves.push(item.id);
        }
      });

      if (ids.length == 0) return this.$message.info(this.i18n['请选择要移除下架商品']);
      if (is_shelves.length > 0) {
        this.$message.info(this.i18n['所选商品包含正常销售商品,请检查']);
        return;
      }

      this.cleanFromCart(ids.join(','));
    },
    // 提示清理下架产品
    cleanFromCart(ids) {
      this.$util.showModal({
        title: this.i18n['提示'],
        content: this.i18n['确认移除所选商品吗']+'?',
        success: res => {
          if (res.confirm) {
            this.cleanCartGoods(ids);
          }
        }
      });
    },
    //清理下架
    cleanCartGoods(ids) {
      this.$api
        .post(global.apiUrls.cleanUpGoodCart, {
          cart_ids: ids
        })
        .then(res => {
          this.getCartData();
          this.$store.dispatch('getCartList');
        })
        .catch(err => {
          console.log('err: ' + JSON.stringify(err));
        });
    },

    // 获取商品详情
    openPopup(item) {
      if (item.is_valid == 1) {
        return;
      }
      this.select_id = item.id;
      this.sku_id = item.sku_id;
      this.$api
        .get(global.apiUrls.getGoodsDetail, {
          goods_id: item.goods_id,
          user_id: (global.userInfo && global.userInfo.id) || 0
        })
        .then(res => {
          if (res.data.code == 1) {
            let data = res.data.data;
            this.swipers = data.images;
            this.goodsInfo = {
              name: data.name,
              price: data.shop_price,
              market_price: data.market_price,
              discounts: data.discounts || 0.0,
              thumb: data.thumb,
              description: data.description,
              is_collect: data.is_collect,
              share_award_money: data.share_award_money || 0.0,
              number: 1,
              stock: data.stock || 0,
              totalStock: data.stock || 0,
              sales_sum: data.sales_sum,
              is_spec: data.is_spec
            };
            this.totalStock = data.stock;
            this.body = richText.format(data.body.trim());
            this.comment = data.comment || [];
            this.comment_total = data.comment_total || 0;
            if (data.is_spec == 1) {
              this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
              this.sku_list = Object.values(data.sku_list)
                .map(item => {
                  item.sku_spec = item.key.split('_');
                  return item;
                })
                .filter(item => {
                  return item.stock > 0;
                });
            }
            this.$nextTick(() => {
              if (data.is_spec == 1) {
                this.$refs.specs.init();
              }
            });
          } else {
            this.$refs['specs'].close();
            setTimeout(() => {
              this.$message.info(this.i18n['获取商品规格失败']);
            }, 300);
          }
          const that = this;
          setTimeout(function() {
            that.$refs['specs'].init();
          }, 1);
          setTimeout(function() {
            that.$refs['specs'].open();
          }, 10);
        });
    },

    // 修改购买规格
    setSpec(skuInfo) {
      this.getChangeValue = skuInfo;
    },
    //确定改变规格
    confirmChange() {
      this.$api
        .post(global.apiUrls.changeSetGuiGe, {
          cart_id: this.select_id,
          sku_id: this.getChangeValue.sku_id,
          shop_price: this.getChangeValue.shop_price,
          sku_name: this.getChangeValue.key_name
        })
        .then(res => {
          if(res.data.code == 1){
            this.getCartData(true);
          }else{
            this.$message.info(res.data.msg);
          }
  
        })
        .catch(err => {});
    },
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  .tool-box {
    position: sticky;
    z-index: 999;
  }
  .box-kong {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 98;
  }
  .action-bar {
    position: fixed;
    /* #ifdef H5 */
    bottom: 50px !important;
    /* #endif */
    /* #ifdef APP-PLUS || MP-WEIXIN */
    bottom: 0 !important;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
    /* #endif */
	
    width: 100%;
    z-index: 999;
  }
}
</style>
